<template>
  <el-form>
    <el-form-item>
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-button @click="onModify">修改</el-button>
      <el-button @click="onDelete">删除</el-button>
    </el-form-item>
  </el-form>
  <div class="data-container">
      <el-table
      :data='authDatas'
      style='width: 100%'
      highlight-current-row
      row-key='id'
      lazy
      border
      @row-click="selectionChange"
      :load="load"
      :tree-props="{ children: 'authorizes', hasChildren: 'sysMenu' }"
      >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="code" label="代码" width="300" />
      <el-table-column prop="name" label="名称" width="240" />
    </el-table>
    <el-dialog
      v-model="dialogForm"
      :title="dialogTitle"
      width="30%"
    >
      <el-form v-model="authEntity">
        <el-form-item label="代码" prop="code">
          <el-input v-model.trim="authEntity.code"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="authEntity.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="sortNo">
          <el-input v-model.number="authEntity.sortNo"></el-input>
        </el-form-item>
        <el-form-item label="id" prop="id"  v-show = 'false' >
          <el-input v-model.number="authEntity.id"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">{{$t('msg.common.cancel')}}</el-button>
          <el-button type="primary" @click="onSave"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onActivated, onMounted } from 'vue'
import { deleteById, modify, add } from '@/api/common/common'
import { listTable } from '@/api/user/authorize'
import { ElMessage } from 'element-plus'

const authDatas = ref([])
const dialogForm = ref(false)
const authEntity = ref({})
const authTemp = ref({})
const dialogTitle = ref('')
// 保存数据
const onSave = () => {
  // 判断是编辑还是保存
  console.log(authEntity.value)
  if (!authEntity.value.id) {
    add(authEntity.value, 'auth').then(res => {
      ElMessage.success('新增成功')
      dialogForm.value = false
      initLoad()
    })
  } else {
    modify(authEntity.value, authEntity.value.id, 'auth').then(res => {
      ElMessage.success('修改成功')
      dialogForm.value = false
      initLoad()
    })
  }
}

const initLoad = async () => {
  listTable().then(res => {
    authDatas.value = res
  })
}

onMounted(initLoad())

const load = (row, treeNode, resolve) => {
  resolve(row.authorizes)
}

const selectionChange = selection => {
  console.log(selection)
  authEntity.value = selection
}

const onAdd = () => {
  authTemp.value = authEntity.value
  authEntity.value = {}
  dialogForm.value = true
  if (authTemp.value.sysMenu) {
    dialogTitle.value = '新增按钮权限'
    // 赋值菜单
    authEntity.value.authorize = authTemp.value
    authEntity.value.sysMenu = false
    console.log(authEntity.value)
  } else {
    dialogTitle.value = '新增菜单权限'
    authEntity.value.sysMenu = true
    console.log(authEntity.value)
  }
}

const onModify = () => {
  dialogForm.value = true
  dialogTitle.value = authEntity.value.sysMenu ? '编辑菜单权限' : '编辑按钮权限'
}

const onDelete = () => {
  if (!authEntity.value) {
    ElMessage.info('请选择需要删除的权限')
    return
  }
  if (authEntity.value.sysMenu && authEntity.value.authorizes) {
    ElMessage.info('菜单下有按钮权限,不能删除')
    return
  }
  deleteById(authEntity.value.id, 'auth').then(res => {
    initLoad()
  })
}

</script>

<style>

</style>
